import React, { Component } from 'react'
// 引入Switch组件
import { Switch, Route, Redirect } from 'react-router-dom';
import './Router.css'

// 懒加载的方式1,通过React.lazy方法完成
const CssTransition = React.lazy(() => import('./components/CssTransition'))
const CssGroup = React.lazy(() => import('./components/CssGroup'))
const CssSwitch = React.lazy(() => import('./components/CssSwitch'))
const Login = React.lazy(() => import('./pages/Login'))
const Reg = React.lazy(() => import('./pages/Reg'))
const NotFound = React.lazy(() => import('./pages/NotFound'))
const Home = React.lazy(() => import('./pages/Home'))
const GoodsList = React.lazy(() => import('./pages/GoodsList'))
const GoodsDetail = React.lazy(() => import('./pages/GoodsDetail'))
const Layout = React.lazy(() => import('./pages/Layout'))
const Redux = React.lazy(() => import('./pages/Redux'))
const ReactRedux = React.lazy(() => import('./pages/ReactRedux'))
const Hook = React.lazy(() => import('./pages/Hook'))

export default class Router extends Component {
  render() {
    return (
      <div>
        {/* 懒加载的第二种方式 */}
        < React.Suspense fallback={< mark className="mark" > 加载中...</mark >}>
          {/* 路由的出口，作用类似vue的router-view */}
          < Switch >
            <Route path="/login" component={Login}></Route>
            <Route path="/reg" component={Reg}></Route>
            <Route path="/csstransition" component={CssTransition}></Route>
            <Route path="/cssgroup" component={CssGroup}></Route>
            <Route path="/cssswitch" component={CssSwitch}></Route>
            <Route path="/" exact component={Home}></Route>
            <Route path="/redux" exact component={Redux}></Route>
            <Route path="/reactredux" exact component={ReactRedux}></Route>
            <Route path="/GoodsList" exact component={GoodsList}></Route>
            <Route path="/GoodsDetail/:name" exact component={GoodsDetail}></Route>
            <Route path="/layout" component={Layout}></Route>
            <Route path="/hook" component={Hook}></Route>
            <Route path="/notfound" component={NotFound}></Route>
            {/* 404页面的处理，当用户输入了错误地址时，前面的路由都没有匹配成功，就会重定向到一个固定的页面 */}
            <Redirect to="/notfound"></Redirect>
          </Switch >
        </React.Suspense >
      </div>
    )
  }
}
